<template>
    <view class="flex-box">    
	  <view :class="!item.check ? clickClass : NoclickClass"  v-for="(item, index) in tags" :key="index" @click="setListCheck(index, item)">{{item.name}}</view>
    </view>
</template>

<script>
	export default {
		name: "tuiTags",
		props: {
			clickClass : {
				type : String,
				default : 'tui-tag outline',
			},
			NoclickClass : {
				type : String,
				default : 'tui-tag active',
			},
            // tags: {
            // 	type: Array
            // },
			check : {
				type : Object,
				// default:()=>{}
				default : ()=> {
					return {
						'length' : 20,
						'title' : '选择标签不能超过20个',
						'icon': "none"
					}
				}
			}
		},
		data(){
			return {
				clickTags : [],
				code: [],
				tags : []
			}
		},
		methods: {
            setListCheck(index,tag){
                this.$emit('click',tag,index)
				if( !tag.check ){
					// 校验长度
					if( this.clickTags.length >= this.check.length  ){
						uni.showToast({
							title: this.check.title,
							icon:  this.check.icon
						})
						return;
					}
					// 
					tag.index = index;
					this.clickTags.push(tag);
					this.code.push(tag.code);
				}else{
					for (var i = 0; i < this.clickTags.length; i++) {
						if( this.clickTags[i].index == index ){
							this.clickTags.splice( i , 1 );
							this.code.splice( i , 1 );
							break;    
						}
					}
				}   
				tag.check = !tag.check 
				this.$forceUpdate();  
				console.log( this.clickTags , tag ,this.getClickTags() );
            },
            putTag(tag){
                this.tags.push(tag);
            },
            getTags(){
                return this.tags;
            },
			concatTags(array){
				this.tags = this.tags.concat(array);
				console.log( 'concatTags', this.tags ,array );
			},
			getClickTags(){
				return this.clickTags;
			},
			getCode(){
				return this.code;
			}
        }
	}
</script>

<style scoped lang="scss">
	@import '../../static/style/thorui.css';
	.tui-tag{
	    margin-bottom: 15upx;
	    margin-right: 15upx;
	}
	.outline{
		border: solid 1px #b29873;
		color: #b29873;
	}
	.active{
		background: #b29873;
		border: solid 1px #b29873;
		color: #fefefe;
	}
</style>
